﻿<html>
<head>
    <meta charset="utf-8">
    <title>通知中心</title>
    <link href="../lib/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet" />
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
    <link rel="stylesheet" href="../js/lay-module/dtree/dtree.css">
    <link rel="stylesheet" href="../js/lay-module/dtree/font/dtreefont.css">
    <script src="../js/framework-ui.js?v=@WaterCloud.Code.GlobalContext.GetVersion()"></script>
    <script src="../lib/layui-v2.5.5/layui.js"></script>
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <script src="../js/lay-config.js?v=@WaterCloud.Code.GlobalContext.GetVersion()" charset="utf-8"></script>
    <link href="../css/watercloud.css?v=@WaterCloud.Code.GlobalContext.GetVersion()" rel="stylesheet" />
    <style>
        /** 消息列表样式 */
        .layui-badge {
            position: relative;
            display: inline-block;
            padding: 0 6px;
            font-size: 12px;
            text-align: center;
            background-color: #FF5722;
            color: #fff;
            border-radius: 2px;
            left: 40px;
        }

        .layui-badge-yellow {
            margin-top: 5px;
            color: #faad14;
            background: #fff;
            border: 1px solid #ffe58f;
        }

        .layui-badge-green {
            margin-top: 5px;
            color: #52c41a;
            background: #fff;
            border: 1px solid #b7eb8f;
        }

        .layui-badge-red {
            margin-top: 5px;
            color: #f5222d;
            background: #fff;
            border: 1px solid #ffa39e;
        }
        .message-list {
            position: absolute;
            top: 48px;
            padding: 0px 15px;
            left: 0;
            right: 0;
            bottom: 45px;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            background: #F2F2F2;
        }
        .watercolor {
            background-color: #fff;
        }

        .message-list-item {
            display: block;
            line-height: 24px;
            position: relative;
            border-bottom: 1px solid #e8e8e8;
        }

            .message-list-item:hover, .message-btn-clear:hover, .message-btn-more:hover {
                background: #F2F2F2;
            }

            .message-list-item .message-item-icon {
                width: 30px;
                height: 30px;
                line-height: 30px;
                margin-top: -20px;
                border-radius: 50%;
                position: absolute;
                left: 40px;
                top: 50%;
            }

                .message-list-item .message-item-icon.layui-icon {
                    color: #fff;
                    font-size: 15px;
                    text-align: center;
                    background-color: #FE5D58;
                    margin-top: -20px;
                }

                .message-list-item .message-item-icon + .message-item-right {
                    margin-left: 40px;
                }

            .message-list-item .message-item-title {
                color: #666;
                font-size: 14px;
                padding-left: 40px;
            }

            .message-list-item .message-item-text {
                color: #999;
                font-size: 12px;
                padding-left: 40px;
            }

            .message-list-item > .layui-badge {
                position: absolute;
                right: 20px;
                top: 12px;
                left: 40px;
            }
        .message-btn-clear, .message-btn-more {
            color: #666;
            display: block;
            padding: 10px 5px;
            line-height: 24px;
            text-align: center;
            cursor: pointer;
            background-color:#fff;
        }

        .message-btn-clear {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            border-top: 1px solid #e8e8e8;
        }

        .message-btn-more {
            color: #666;
            font-size: 13px;
        }

            .message-btn-more.ew-btn-loading > .ew-btn-loading-text {
                font-size: 13px !important;
            }

        .message-list-empty {
            color: #999;
            padding: 100px 0;
            text-align: center;
            display: none;
        }

            .message-list-empty > .layui-icon {
                color: #ccc;
                display: block;
                font-size: 45px;
                margin-bottom: 15px;
            }

        .show-empty .message-list-empty {
            display: block;
        }

        .show-empty .message-btn-clear, .show-empty .message-list {
            display: none;
        }

        /** //消息列表样式结束 */
    </style>
    <script>
        layui.use(['element','jquery'], function () {
            var $ = layui.$;
            $(function () {
                //todo ajax获取3个信息的参数 进行显示
                //通知值
                var num1 = 1;
                //私信值
                var num2 = 1;
                //带办值
                var num3 = 1;
                $('#message1').html("通知(" + num1 + ")");
                $('#message2').html("私信(" + num2 + ")");
                $('#message3').html("待办(" + num3 + ")");
                var html1 = '';
                var html2 = '';
                var html3 = '';
                html1 += '<a class="message-list-item" href="javascript:;">'
                + '<div class="watercolor" >'
                    +'<i class="layui-icon layui-icon-tips message-item-icon"></i>'
                +'<div class="message-item-right">'
                    + '<h2 class="message-item-title">' + 'XXXX' +'通知</h2>'
                +'<p class="message-item-text">'+'10个月前'+'</p>'
                + '</div>'
                + '</div >'
                + '</a >'
                html2 += '<a class="message-list-item" href="javascript:;">'
                    + '<div class="watercolor" >'
                    + '<!--<img class="message-item-icon" src="assets/images/head.jpg" alt = ""> -->'
                    + '<div class="message-item-right">'
                    + '<h2 class="message-item-title">' + 'a' +'评论了你</h2>'
                    + '<p class="message-item-text">'+'xxxxxxxx'+'</p>'
                    + '<p class="message-item-text">'+'10个月前'+'</p>'
                    + '</div>'
                    + '</div>'
                    + '</a>'
                    + '<a id="messageMoreBtn2" class="message-btn-more">加载更多</a>';
                html3 += '<a class="message-list-item" href="javascript:;">'
                    + '<div class="watercolor" >'
                    + '<span class="layui-badge '+'layui-badge-yellow'+'">'+'待完成'+'</span>'
                    + '<div class="message-item-right">'
                    + '<h2 class="message-item-title">' + 'sss' +'待完成</h2>'
                    + '<p class="message-item-text">'+'10个月前'+'</p>'
                    + '</div>'
                    + '</div>'
                    + '</a>';
                $('#list1').html(html1);
                $('#list2').html(html2);
                $('#list3').html(html3);
            });
            /* 加载更多按钮点击事件 */
            $(document).on('click', '#messageMoreBtn2', function () {
                var $that = $(this);
                //todo 前后交互，htm2是根据后端数据生成的
                var html2 = '';
                html2 += '<a class="message-list-item" href="javascript:;">'
                    + '<div class="watercolor" >'
                    + '<!--<img class="message-item-icon" src="assets/images/head.jpg" alt = ""> -->'
                    + '<div class="message-item-right">'
                    + '<h2 class="message-item-title">' + 'a' + '评论了你</h2>'
                    + '<p class="message-item-text">' + 'xxxxxxxx' + '</p>'
                    + '<p class="message-item-text">' + '10个月前' + '</p>'
                    + '</div>'
                    + '</div>'
                    + '</a>'
                    + '<a id="messageMoreBtn2" class="message-btn-more">加载更多</a>';
                $('#messageMoreBtn2').remove();
                $('#list2').each(function () {
                    var y = $(this).children().last();
                    y.after(html2);
                });
            });
            /* 清空消息点击事件 分开写交互*/
            $('#messageClearBtn1').click(function () {
                //需要前后端交互
                $('#message1').html("通知(0)");
                $(this).parents('.layui-tab-item').addClass('show-empty');
            });
            $('#messageClearBtn2').click(function () {
                //需要前后端交互
                $('#message2').html("私信(0)");
                $(this).parents('.layui-tab-item').addClass('show-empty');
            });
            $('#messageClearBtn3').click(function () {
                //需要前后端交互
                $('#message3').html("待办(0)");
                $(this).parents('.layui-tab-item').addClass('show-empty');
            });
        });
    </script>
</head>
<body>
    <div class="layui-card" style="box-shadow: none;border: none;">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title" style="text-align: center;">
                <li class="layui-this" id="message1"></li>
                <li id="message2"></li>
                <li id="message3"></li>
            </ul>
            <div class="layui-tab-content" style="padding: 0;">
                <!-- tab1 -->
                <div class="layui-tab-item layui-show">
                    <div class="message-list" id="list1">
                            <!-- 实际项目请使用后台数据循环出来 -->
                        <!--<a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                                <div class="message-item-right">
                                    <h2 class="message-item-title">你收到了14份新周报</h2>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>
                        <a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                                <div class="message-item-right">
                                    <h2 class="message-item-title">你收到了14份新周报</h2>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>
                        <a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <i class="layui-icon layui-icon-speaker message-item-icon"></i>
                                <div class="message-item-right">
                                    <h2 class="message-item-title">你收到了14份新周报</h2>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>-->
                    </div>
                    <!-- 列表为空 -->
                    <div class="message-list-empty">
                        <i class="layui-icon layui-icon-notice"></i>
                        <div>没有通知</div>
                    </div>
                    <a id="messageClearBtn1" class="message-btn-clear">全部标记已读</a>
                </div>
                <!-- tab2 -->
                <div class="layui-tab-item">
                    <div class="message-list"  id="list2">
                        <!--<a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <img class="message-item-icon" src="assets/images/head.jpg" alt="">
                                <div class="message-item-right">
                                    <h2 class="message-item-title">a评论了你</h2>
                                    <p class="message-item-text">xxxxxxxx</p>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>
                        <a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <img class="message-item-icon" src="assets/images/head.jpg" alt="">
                                <div class="message-item-right">
                                    <h2 class="message-item-title">b评论了你</h2>
                                    <p class="message-item-text">ssssssss</p>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>
                        <a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <img class="message-item-icon" src="assets/images/head.jpg" alt="">
                                <div class="message-item-right">
                                    <h2 class="message-item-title">c评论了你</h2>
                                    <p class="message-item-text">ggggggggg</p>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>-->
                        <a id="messageMoreBtn2" class="message-btn-more">加载更多</a>
                    </div>
                    <!-- 列表为空 -->
                    <div class="message-list-empty">
                        <i class="layui-icon layui-icon-dialogue"></i>
                        <div>没有消息</div>
                    </div>
                    <a id="messageClearBtn2" class="message-btn-clear">清空消息</a>
                </div>
                <!-- tab3 -->
                <div class="layui-tab-item">
                    <div class="message-list"  id="list3">
                        <!--<a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <span class="layui-badge layui-badge-yellow">待完成</span>
                                <div class="message-item-right">
                                    <h2 class="message-item-title">sss待完成</h2>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>
                        <a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <span class="layui-badge layui-badge-green">已完成</span>
                                <div class="message-item-right">
                                    <h2 class="message-item-title">XXXX已完成</h2>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>
                        <a class="message-list-item" href="javascript:;">
                            <div class="watercolor">
                                <span class="layui-badge layui-badge-red">未完成</span>
                                <div class="message-item-right">
                                    <h2 class="message-item-title">sssss未完成</h2>
                                    <p class="message-item-text">10个月前</p>
                                </div>
                            </div>
                        </a>-->
                    </div>
                    <!-- 列表为空 -->
                    <div class="message-list-empty">
                        <i class="layui-icon layui-icon-flag"></i>
                        <div>没有待办</div>
                    </div>
                    <a id="messageClearBtn3" class="message-btn-clear">清空待办</a>
                </div>
            </div>
        </div>
    </div>

</body>
</html>